<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '物流详情'
  }
}
</route>
<template>
  <view class="logistics-details">
    <!-- 顶部导航 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', activeTab === index ? 'active' : '']" @click="activeTab = index">
        {{ tab.logiCom }} -
        <text v-if="activeTab === index">{{ tab.logiOrder }}</text>
      </view>
    </view>
    <view style="padding: 10px 0; display: flex; justify-content: space-between">
      <view class="logistics-info-item">
        <view class="logistics-info-item-content">{{ tabs[activeTab].logiOrder }}</view>
      </view>
      <view class="logistics-info-item">
        <view style="color: #007aff; cursor: pointer; text-decoration: underline" @click="handleCopy"> 复制 </view>
      </view>
    </view>
    <!-- 时间线 -->
    <view class="timeline">
      <view v-for="(item, index) in logisticsList" :key="index" class="timeline-item">
        <view class="line" :class="false ? 'active' : ''" />
        <view class="dot" :class="false ? 'active' : ''" />
        <view class="content">
          <view class="time">{{ item.time }}</view>
          <view class="desc">{{ item.context }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getLogiList, queryTrack } from '@/service/order'
const activeTab = ref(0)
const tabs = ref([])

const logisticsList = ref([])
const orderCode = ref('')

const initLogiList = (orderCode: any) => {
  getLogiList({
    orderCode
  }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      // tab 赋值
      tabs.value = res.result
      initQueryTrack(res.result[0])
    }
  })
}

const initQueryTrack = (result: any) => {
  queryTrack({
    logicom: result.logiCom,
    logicode: result.logiOrder,
    orderCode: orderCode.value
  }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      logisticsList.value = res.result
    }
  })
}
const handleCopy = () => {
  uni.setClipboardData({
    data: `物流编号：${tabs.value[activeTab.value].logiOrder} \n
    物流公司：${tabs.value[activeTab.value].logiCom}`,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

onLoad((options) => {
  orderCode.value = options.orderCode
  initLogiList(orderCode.value)
})
</script>

<style lang="scss" scoped>
.logistics-details {
  padding: 16px;

  .tabs {
    display: flex;
    overflow: scroll;
    .tab-item {
      padding: 12px 0;
      // flex: 1;
      margin-right: 20px;
      font-size: 16px;
      color: #666;
      text-align: center;
      border-bottom: 2px solid transparent;

      &.active {
        font-weight: bold;
        color: #007aff;
        border-bottom: 2px solid #007aff;
      }
    }
  }

  .timeline {
    margin-top: 16px;

    .timeline-item {
      position: relative;
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;

      .line {
        position: absolute;
        top: 12px;
        left: 5px;
        width: 2px;
        height: calc(100% + 16px);
        background-color: #ddd;
      }

      .dot {
        width: 12px;
        height: 12px;
        margin-right: 12px;
        background-color: #ddd;
        border-radius: 50%;

        &.active {
          background-color: #007aff;
        }
      }

      .content {
        width: 80%;
        .time {
          margin-bottom: 4px;
          font-weight: bold;
        }

        .desc {
          color: #666;
        }
      }

      &.active {
        background-color: #007aff;
      }
    }
  }

  .red-placeholder {
    width: 100%;
    height: 100px;
    margin-top: 16px;
    background-color: red;
  }
}
</style>
